import { useState } from "react";
import axios from "axios";
import "./App.css";

function App() {
  const [text, setText] = useState("");
  const handleInpChange = (e) => {
    console.log(e.target.value);
    setText(e.target.value);
  };
  const handleFetchAudio = async () => {
    if (!text) {
      return;
    }
    const { data } = await axios.post("http://localhost:5050/synthesize", {
      text: text,
      id: new Date().getTime(),
    });
    if (data.code == 200) {
      const audio = new Audio(`data:audio/wav;base64,${data.data.Audio}`);
      audio.play();
    }
  };
  return (
    <>
      <div>
        <input onChange={handleInpChange}></input>
        <button onClick={handleFetchAudio}>转换</button>
      </div>
    </>
  );
}

export default App;
